<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单播放器按钮</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<style type="text/css">
			#controlGroup{
				list-style: none;
			}
			
			#controlGroup li{
				float: left;
				display: inline-block;
				width: 30px;
				height: 30px;
				border: 3px solid #000;
				text-align: center;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<ul id="controlGroup">
			<li>&lt;&lt;</li>
			<li>&gt;</li>
			<li>■</li>
			<li>&gt;&gt;</li>
		</ul>
		
		<script type="text/javascript">
			$(function(){
			// 1. 第一个li的左上和左下设定为圆角
					// 四边: margin,padding,border: 顶, 右, 底, 左 ( 从顶开始,顺时针)
					// 四角:四边的坐标想做偏移45度,左上, 右上, 右下, 左下 (从左上开始,顺时针)
			$('#controlGroup>li:first').css('border-radius','6px 0 0 6px');		
			// 2.最后的li的右上和右下设定为圆角
			$('#controlGroup>li:last').css('border-radius','0 6px 6px 0');
			// 3.把除了最后一个意外的li的右边框去掉
			// $('#controlGroup>li:not(:last-child)').css('border-right-width','0');
	
			// $('#controlGroup>li:not(:last)').css('border-right-width','0');
			// $('#controlGroup>li:lt(3)').css('border-right-width','0');
						
			// 3-1.把除了第一个以外的li的左边框去掉		
			// $('#controlGroup>li:not(:first)').css("border-left-width",'0');
			// $('#controlGroup>li:not(:first-child)').css('border-left-width','0');
			$('#controlGroup>li:gt(0)').css('border-left-width','0');
			
			});
			
		</script>
	</body> 
</html>
